<template>
  <div class="classification-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title">档案分类整理</div>
        <div class="subtitle">智能分类管理系统</div>
      </div>
    </div>

    <!-- 路由导航 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/files/digital-archive">
            <ScanOutlined />
            纸质档案数字化
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <AppstoreOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <AppstoreOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">分类体系</div>
              <div class="stat-value">{{ classifyStats.categories }}</div>
              <div class="stat-label">个分类</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <FileTextOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">已分类档案</div>
              <div class="stat-value">{{ classifyStats.classifiedFiles }}</div>
              <div class="stat-label">万份</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <RobotOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">自动化率</div>
              <div class="stat-value">{{ classifyStats.autoRate }}%</div>
              <div class="stat-label">智能分类</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">准确率</div>
              <div class="stat-value">{{ classifyStats.accuracy }}%</div>
              <div class="stat-label">分类准确</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 分类管理区域 -->
    <div class="classification-management">
      <a-row :gutter="[24, 24]">
        <!-- 分类树 -->
        <a-col :xs="24" :lg="8">
          <a-card title="分类体系" :bordered="false">
            <div class="tree-actions">
              <a-button type="primary" size="small" @click="addCategory">
                <PlusOutlined />
                添加分类
              </a-button>
              <a-button size="small" @click="expandAll">
                <BranchesOutlined />
                展开全部
              </a-button>
            </div>

            <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="categoryTree" :show-line="true" :show-icon="true" @select="onSelectCategory">
              <template #title="{ title, key, children }">
                <span class="tree-node-title">{{ title }}</span>
                <span class="tree-node-count" v-if="children"> ({{ children.length }}) </span>
              </template>
            </a-tree>
          </a-card>
        </a-col>

        <!-- 分类详情 -->
        <a-col :xs="24" :lg="16">
          <a-card title="分类详情" :bordered="false">
            <div v-if="selectedCategory">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item label="分类名称">
                  {{ selectedCategory.title }}
                </a-descriptions-item>
                <a-descriptions-item label="分类编码">
                  {{ selectedCategory.code }}
                </a-descriptions-item>
                <a-descriptions-item label="档案数量"> {{ selectedCategory.fileCount }}份 </a-descriptions-item>
                <a-descriptions-item label="子分类数"> {{ selectedCategory.children?.length || 0 }}个 </a-descriptions-item>
                <a-descriptions-item label="创建时间" :span="2">
                  {{ selectedCategory.createTime }}
                </a-descriptions-item>
                <a-descriptions-item label="分类描述" :span="2">
                  {{ selectedCategory.description }}
                </a-descriptions-item>
              </a-descriptions>

              <div class="category-actions" style="margin-top: 16px">
                <a-space>
                  <a-button type="primary" @click="editCategory">
                    <EditOutlined />
                    编辑分类
                  </a-button>
                  <a-button @click="addSubCategory">
                    <PlusOutlined />
                    添加子分类
                  </a-button>
                  <a-button danger @click="deleteCategory">
                    <DeleteOutlined />
                    删除分类
                  </a-button>
                </a-space>
              </div>
            </div>
            <div v-else class="no-selection">
              <a-empty description="请选择分类查看详情" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 自动分类配置 -->
    <div class="auto-classification-section">
      <a-card title="自动分类配置" :bordered="false">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :md="12">
            <a-form layout="vertical">
              <a-form-item label="分类算法">
                <a-select v-model:value="autoConfig.algorithm" placeholder="选择分类算法">
                  <a-select-option value="ml">机器学习</a-select-option>
                  <a-select-option value="rule">规则引擎</a-select-option>
                  <a-select-option value="hybrid">混合算法</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="置信度阈值">
                <a-slider v-model:value="autoConfig.confidence" :min="0.5" :max="1" :step="0.05" :tooltip-formatter="(value) => `${(value * 100).toFixed(0)}%`" />
              </a-form-item>

              <a-form-item label="处理模式">
                <a-radio-group v-model:value="autoConfig.mode">
                  <a-radio value="realtime">实时处理</a-radio>
                  <a-radio value="batch">批量处理</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </a-col>

          <a-col :xs="24" :md="12">
            <div class="auto-stats">
              <h4>自动分类统计</h4>
              <a-statistic-countdown title="下次批量处理" :value="nextBatchTime" format="HH:mm:ss" />
              <div class="stat-items">
                <div class="stat-item">
                  <span class="label">今日处理：</span>
                  <span class="value">{{ autoStats.todayProcessed }}份</span>
                </div>
                <div class="stat-item">
                  <span class="label">待分类：</span>
                  <span class="value">{{ autoStats.pending }}份</span>
                </div>
                <div class="stat-item">
                  <span class="label">成功率：</span>
                  <span class="value">{{ autoStats.successRate }}%</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

        <div class="auto-actions">
          <a-space>
            <a-button type="primary" @click="startAutoClassification">
              <PlayCircleOutlined />
              开始自动分类
            </a-button>
            <a-button @click="pauseAutoClassification">
              <PauseCircleOutlined />
              暂停处理
            </a-button>
            <a-button @click="viewClassificationRules">
              <SettingOutlined />
              分类规则
            </a-button>
          </a-space>
        </div>
      </a-card>
    </div>

    <!-- 分类任务列表 -->
    <div class="classification-tasks-section">
      <a-card title="分类任务" :bordered="false">
        <a-table :columns="taskColumns" :data-source="classificationTasks" :pagination="{ pageSize: 10 }" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template v-if="column.key === 'progress'">
              <a-progress :percent="record.progress" size="small" :status="record.progress === 100 ? 'success' : 'active'" />
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="viewTaskDetail(record)">查看</a-button>
                <a-button size="small" @click="retryTask(record)">重试</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  HomeOutlined,
  FolderOutlined,
  ScanOutlined,
  AppstoreOutlined,
  FileTextOutlined,
  RobotOutlined,
  CheckCircleOutlined,
  PlusOutlined,
  BranchesOutlined,
  EditOutlined,
  DeleteOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'

// 分类统计
const classifyStats = reactive({
  categories: 156,
  classifiedFiles: 108.3,
  autoRate: 89,
  accuracy: 94.5
})

// 自动分类配置
const autoConfig = reactive({
  algorithm: 'hybrid',
  confidence: 0.85,
  mode: 'batch'
})

// 自动分类统计
const autoStats = reactive({
  todayProcessed: 3256,
  pending: 892,
  successRate: 94.5
})

// 下次批量处理时间
const nextBatchTime = ref(Date.now() + 2 * 60 * 60 * 1000)

// 分类树数据
const categoryTree = ref([
  {
    title: '生死记录',
    key: '001',
    code: 'LS001',
    fileCount: 156780,
    createTime: '2023-01-01',
    description: '记录众生生死轮回的重要档案',
    children: [
      {
        title: '出生记录',
        key: '001-01',
        code: 'LS001-01',
        fileCount: 78390
      },
      {
        title: '死亡记录',
        key: '001-02',
        code: 'LS001-02',
        fileCount: 78390
      }
    ]
  },
  {
    title: '业力档案',
    key: '002',
    code: 'KM002',
    fileCount: 298456,
    createTime: '2023-01-01',
    description: '记录善恶业力评定和修行进度',
    children: [
      {
        title: '善业记录',
        key: '002-01',
        code: 'KM002-01',
        fileCount: 149228
      },
      {
        title: '恶业记录',
        key: '002-02',
        code: 'KM002-02',
        fileCount: 149228
      }
    ]
  }
])

// 树控制
const expandedKeys = ref(['001', '002'])
const selectedKeys = ref([])
const selectedCategory = ref(null)

// 表格列定义
const taskColumns = [
  { title: '任务ID', dataIndex: 'id', key: 'id' },
  { title: '任务类型', dataIndex: 'type', key: 'type' },
  { title: '档案数量', dataIndex: 'fileCount', key: 'fileCount' },
  { title: '进度', key: 'progress' },
  { title: '状态', key: 'status' },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '操作', key: 'action', width: 150 }
]

// 分类任务数据
const classificationTasks = ref([
  {
    id: 'CT20231201001',
    type: '自动分类',
    fileCount: 1250,
    progress: 75,
    status: '处理中',
    startTime: '2023-12-01 09:00:00'
  },
  {
    id: 'CT20231201002',
    type: '批量分类',
    fileCount: 2340,
    progress: 100,
    status: '已完成',
    startTime: '2023-12-01 08:30:00'
  }
])

// 方法
const onSelectCategory = (keys, { node }) => {
  if (keys.length > 0) {
    selectedCategory.value = node
  }
}

const addCategory = () => {
  console.log('添加分类')
}

const expandAll = () => {
  console.log('展开全部')
}

const editCategory = () => {
  console.log('编辑分类')
}

const addSubCategory = () => {
  console.log('添加子分类')
}

const deleteCategory = () => {
  console.log('删除分类')
}

const startAutoClassification = () => {
  console.log('开始自动分类')
}

const pauseAutoClassification = () => {
  console.log('暂停自动分类')
}

const viewClassificationRules = () => {
  console.log('查看分类规则')
}

const getStatusColor = (status) => {
  const colorMap = {
    处理中: 'processing',
    已完成: 'success',
    等待中: 'default',
    失败: 'error'
  }
  return colorMap[status] || 'default'
}

const viewTaskDetail = (record) => {
  console.log('查看任务详情:', record)
}

const retryTask = (record) => {
  console.log('重试任务:', record)
}
</script>

<style lang="scss" scoped>
.classification-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .header-content {
      .title {
        font-size: 28px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        color: $text-secondary;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, $secondary-color, #f0c674);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
      }

      .stat-content {
        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 2px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .classification-management,
  .auto-classification-section,
  .classification-tasks-section {
    margin-bottom: 24px;

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .tree-actions {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
  }

  .tree-node-title {
    font-weight: bold;
  }

  .tree-node-count {
    color: $text-secondary;
    font-size: 12px;
  }

  .no-selection {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .auto-stats {
    .stat-items {
      margin-top: 16px;

      .stat-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        .label {
          color: $text-secondary;
        }

        .value {
          color: $secondary-color;
          font-weight: bold;
        }
      }
    }
  }

  .auto-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 153, 10, 0.2);
  }
}
</style>
